<template>
  <div class="" style="min-height: 100%; background-color: #ddd">
    <!-- 置顶图片 -->
    <div style="height: 300px">
      <img
        src="@/assets/goodsList_top.jpg"
        alt=""
        style="width: 100%; height: 100%"
      />
    </div>

    <!-- 面包屑 -->
    <div style="width: 80%; margin: 20px auto 0">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/front/home' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>产物列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 标题 -->
    <div
      style="
        width: 100%;
        padding: 30px 0;
        text-align: center;
        color: rgba(0, 0, 0, 0.8);
        font-size: 50px;
        letter-spacing: 30px;
      "
    >
      产物列表
    </div>

    <!-- 产物查询 -->
    <div style="width: 80%; margin: 0 auto; padding-bottom: 100px">
      <div style="margin-bottom: 10px">
        <el-input
          v-model="goodsName"
          clearable
          placeholder="请输入产物名"
          style="width: 200px"
          @change="load"
        ></el-input>

        <el-select
          v-model="goodsTypeId"
          clearable
          placeholder="请选择分类"
          style="margin-left: 5px"
          @change="load"
        >
          <el-option
            v-for="item in goodstypeData"
            :key="item.id"
            :label="item.goodsTypeName"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="sourceId"
          clearable
          placeholder="请选择产地"
          style="margin-left: 5px"
          @change="load"
        >
          <el-option
            v-for="item in sourceData"
            :key="item.id"
            :label="item.sourceName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>

      <!-- 产物列表 -->
      <div
        style="
          display: flex;
          flex-wrap: wrap;
          justify-content: start;
          align-items: start;
          padding: 10px;
          border: 2px solid #eee;
          border-radius: 3px;
        "
      >
        <!-- 产物单项 -->
        <div
          v-for="item in tableData"
          :key="item.id"
          class="goodsItem"
          @click="$router.push('/front/goodsDetail/' + item.id)"
        >
          <img
            v-if="item.avatarUrl"
            :src="item.avatarUrl"
            alt=""
            style="width: 70%; aspect-ratio: 1/1; border: 2px solid #f2d070"
          />
          <img
            v-else
            src="@/assets/logo1.png"
            alt=""
            style="width: 70%; aspect-ratio: 1/1; border: 2px solid #f2d070"
          />
          <!-- 鼠标浮上图标 -->
          <div class="look">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                aspect-ratio: 1/1;
                background-color: #f2d070;
              "
            >
              <i
                class="el-icon-search"
                style="color: #eee; transform: scale(2)"
              ></i>
            </div>
          </div>
          <span style="margin: 5px">{{ item.goodsName }}</span>
        </div>
      </div>
    </div>

    <div style="height: 150px; background-color: rgba(0, 0, 0, 0.8)"></div>
  </div>
</template>

<script>
export default {
  name: 'FrontGoodsList',
  data() {
    return {
      goodstypeData: [],
      sourceData: [],
      tableData: [],
      goodsName: '',
      goodsTypeId: '',
      sourceId: ''
    }
  },
  beforeMount() {
    this.load()
    this.loadGoodstype()
    this.loadSource()
  },
  methods: {
    load() {
      this.$http
        .get(
          '/goods/list?goodsName=' +
            this.goodsName +
            '&goodsTypeId=' +
            this.goodsTypeId +
            '&sourceId=' +
            this.sourceId
        )
        .then(res => {
          console.log('goodsList数据：', res)
          if (res.code == 200) {
            this.tableData = res.data
          } else {
            this.$message.error('获取数据失败！')
          }
        })
    },
    loadGoodstype() {
      this.$http.get('/goodstype/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.goodstypeData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    },
    loadSource() {
      this.$http.get('/source/list').then(res => {
        console.log(res)
        if (res.code == 200) {
          this.sourceData = res.data
        } else {
          alert('获取数据失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.goodsItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.5%;
  margin: 10px 0.5% 10px 0;
  cursor: pointer;

  .look {
    position: absolute;
    display: none;
    width: calc(70% + 2px);

    &:hover {
      display: block;
    }
  }

  img:hover + .look {
    display: block;
  }
}
</style>
